/**
 * Copyright (c) Enalean, 2017. All Rights Reserved.
 *
 * This file is a part of Tuleap.
 *
 * Tuleap is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 * Tuleap is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with Tuleap. If not, see <http://www.gnu.org/licenses/>.
 */

h2 {
    font-size: 2em;
}

h3 {
    font-size: 1.3em;
}

blockquote p {
    font-size: 1em;
}

input[type="file"] {
    margin-top: -13px;
}

.tooltip.in {
    opacity: 1;
}

.tooltip.right .tooltip-arrow {
    border-right-color: $dark-grey;
}

.tooltip-inner {
    background-color: $dark-grey;
}

.tour-backdrop {
    opacity: .3;
}

.alert {
    margin: 10px 0;
    padding: 20px;
    border: 0;
    border-left: 5px solid $ui-color-warning;
    border-radius: 3px;
    background: transparentize($ui-color-warning, .9);
    color: darken($ui-color-warning, 10%);
    list-style: none;
    text-shadow: none;

    h4 {
        margin: 0 0 20px;
        color: inherit;
    }

    &.alert-absolute {
        background: $ui-color-warning-light;
    }
}

.alert-success {
    border-left-color: $ui-color-success;
    background: transparentize($ui-color-success, .9);
    color: $ui-color-success;

    &.alert-absolute {
        background: $ui-color-success-light;
    }
}

.alert-info {
    border-left-color: $ui-color-info;
    background: transparentize($ui-color-info, .9);
    color: darken($ui-color-info, 30%);

    &.alert-absolute {
        background: $ui-color-info-light;
    }
}

.alert-error {
    border-left-color: $ui-color-danger;
    background: transparentize($ui-color-danger, .9);
    color: $ui-color-danger;

    &.alert-absolute {
        background: $ui-color-danger-light;
    }
}

.popover[class*="tour"] {
    min-width: 370px;
    max-width: 370px;
    padding: 0;
    border: 0;
    background: $main;
    color: $white;
    font-size: .85em;
    box-shadow: 0 0 10px rgba(0, 0, 0, .4);

    &.top .arrow:after {
        border-top-color: $main;
    }

    &.right .arrow:after {
        border-right-color: $main;
    }

    &.bottom .arrow:after {
        border-bottom-color: $dark-main;
    }

    &.left .arrow:after {
        border-left-color: $main;
    }

    .popover-title {
        border: 0;
        background: $dark-main;
        color: $white;
        font-size: 1.1em;
    }

    .popover-navigation [data-role=prev], .popover-navigation [data-role=next] {
        margin-right: 5px;
        float: left;
    }
}

legend {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.dropdown-menu {
    z-index: 3000;
}

.popover {
    z-index: 4000;

    .project-privacy {
        font-size: .9em;
    }
}

.modal {
    form {
        margin: 0;
    }
}

.dropdown-submenu.pull-left.glued > .dropdown-menu {
    left: 0;
    margin: 0;
    transform: translateX(-100%);
}

.nav-tabs {
    margin: 30px 0 20px;
    padding: 0 20px;
    border-bottom: 0;
    background-color: $white;
    font-family: 'SourceSansPro', 'Helvetica Neue', Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: inset 0 1px 0 #e3e5ed, inset 0 -1px 0 #e3e5ed;

    label {
        letter-spacing: normal;
        text-transform: none;
    }

    & > li {
        border-top: 1px solid transparent;
        border-right: 0;
        border-bottom: 1px solid transparent;
        border-left: 0;
    }

    & > li:hover, li:focus {
        border-top: 1px solid transparent;
        border-right: 0;
        border-left: 0;
        box-shadow: inset 0 -2px 0 $navbar-color;
    }

    & > li > a {
        margin-right: 0;
        padding: 10px 30px;
        border-top: 1px;
        border-right: 0;
        border-bottom: 2px solid transparent;
        border-left: 0;
        background-color: transparent;
        color: $navbar-color;
    }

    & > li > a:hover, a:focus {
        padding: 10px 30px;
        border-top: 1px;
        border-right: 0;
        border-left: 0;
        background-color: transparent;
        color: $navbar-color;
    }

    li.active {
        > a {
            border-bottom: 2px solid $navbar-color;
        }
    }

    a.active {
        border-bottom-color: $navbar-color;
    }

    .dropdown-toggle {
        border-color: transparent;
        background-color: transparent;
        color: $navbar-color;
    }

    .dropdown-menu {
        border: 0;
        border-radius: 0;
    }

    & > li > .dropdown-toggle > .caret {
        border-top-color: $navbar-color;
        border-bottom-color: $navbar-color;
    }

}

.tabs-left > .nav-tabs .active > a, .tabs-left > .nav-tabs .active > a:hover,
.tabs-left > .nav-tabs .active > a:focus {
    border-color: transparent;
}

.nav li.dropdown.open .caret, .nav li.dropdown.open.active .caret,
.nav li.dropdown.open a:hover .caret {
    border-top-color: $navbar-color;
    border-bottom-color: $navbar-color;
}

.nav > li.dropdown.open {
    &.active {
        a:hover,
        a:focus {
            border-color: transparent;
            background-color: transparent;
            color: $navbar-color;
        }
    }

    > .dropdown-menu {
        font-size: 14px;
        font-weight: normal;
        letter-spacing: normal;
        text-transform: none;

        a {
            padding: 10px 20px;
            color: $navbar-color;
            line-height: 14px;

            &:hover,
            &:focus {
                border-color: transparent;
                background: #f3f3f3;
                color: $navbar-color;
            }
        }
    }
}

.tabs-left > .nav-tabs {
    box-shadow: none;
}

/************
 * BUTTONS
 ************/

@mixin btn($color) {
    text-shadow: none;
    font-family: 'SourceSansPro', Helvetica, Arial, sans-serif;
    border-color: $color;
    background: $color;
    outline: none;

    &:not(.btn-link) {
        box-shadow: 0 1px 1px rgba(0, 0, 0, .12);
    }

    &.btn-small {
        padding: 0 12px;
        font-size: 14px;
        line-height: 24px;

        > .caret:not(:only-child) {
            vertical-align: text-top;
        }
    }

    &.btn-mini {
        padding: 0 8px;
        font-size: 12px;
        line-height: 20px;
    }

    &:disabled,
    &.disabled {
        border-color: transparent;
        background: transparentize($color, .4);
        box-shadow: none;
        cursor: not-allowed;
    }

    &.active:not(.disabled):not(:disabled) {
        border-color: darken($color, 10%);
        background: darken($color, 10%);
    }

    > i {
        margin-right: 2px;
    }
}

@mixin btn-hover($color) {
    box-shadow: none;
    transition: box-shadow 75ms ease-in-out,background 75ms ease-in-out,border-color 75ms ease-in-out;
    border-color: darken($color, 5%);
    background: darken($color, 5%);
}

@mixin dropdown-menu($color) {
    font-family: 'SourceSansPro', Helvetica, Arial, sans-serif;

    &:not(.disabled) > a,
    > input {
        color: $color;

        &:hover,
        &:focus {
            background: #f3f3f3;
        }

        &:focus {
            outline: none;
        }
    }
}

.btn-group {
    .btn-primary + .dropdown-menu > li {
        @include dropdown-menu($main);
    }

    > .dropdown-menu > li {
        @include dropdown-menu($main);

        &.dropdown-submenu {
            > .dropdown-menu > li {
                @include dropdown-menu($main);
            }

            &:hover > a,
            &:hover > input {
                background: none;
            }
        }
    }
}

.btn:not(.btn-link) {
    @include btn(#e9e9e9);

    &.btn-primary {
        @include btn($main);
    }

    &.btn-danger {
        @include btn($ui-color-danger);
    }

    &.btn-success {
        @include btn($ui-color-success);
    }

    &.btn-warning {
        @include btn($ui-color-warning);
    }

    &.btn-info {
        @include btn($ui-color-info);
    }

    &:hover:not(:disabled):not(.disabled):not(.active) {
        @include btn-hover(#e9e9e9);

        &.btn-primary {
            @include btn-hover($main);
        }

        &.btn-danger {
            @include btn-hover($ui-color-danger);
        }

        &.btn-success {
            @include btn-hover($ui-color-success);
        }

        &.btn-warning {
            @include btn-hover($ui-color-warning);
        }

        &.btn-info {
            @include btn-hover($ui-color-info);
        }
    }
}

.input-prepend,
.input-append {
    border-radius: 3px;

    > * {
        font-family: 'SourceSansPro', Helvetica, Arial, sans-serif;
    }

    .btn {
        // @bdauton approved this crappy thing
        box-shadow: none !important;
    }
}

/************
 * MODALS
 ************/

.modal {
    border: 1px solid transparent;
    font-family: 'SourceSansPro', 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    box-shadow: 0 10px 36px rgba(0, 0, 0, .2);
    overflow: hidden;
}

.modal-header {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    height: 1px; // Fix IE11 sorcery
    min-height: 64px;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: 0;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background: $main;
    color: $white;

    &.modal-header-error {
        background: $ui-color-danger;
    }

    i {
        padding: 0 5px;
    }

    h2,
    h3 {
        flex: 1;
        order: 1;
        font-size: 24px;
        font-weight: 400;
    }

    p {
        order: 2;
        color: $white;
    }

    > .close {
        position: relative;
        top: 0;
        order: 3;
        margin-top: 0;
        color: $white;
        opacity: 1;
        font-family: inherit;
        font-style: normal;
        text-shadow: none;
        font-weight: 600;
        font-size: 24px;
    }
}

.modal-footer {
    padding: 20px;
    border-top: 1px solid #f3f3f3;
    border-radius: 0 0 3px 3px;
    background-color: $white;
    text-align: right;
}

.modal-backdrop,
.modal-backdrop.fade.in {
    opacity: .5;
}

.tuleap-artifact-modal .modal-header .title {
    font-size: 24px;
}

.tuleap-artifact-modal .column {
    background-color: transparent;

    & h4 {
        color: $white;
    }
}

.tuleap-artifact-modal .modal-body .column {
    padding: 15px;
}

.tuleap-artifact-modal .modal-body fieldset {
    margin: 0 0 20px;
}

/**
 * Table
 */
%tlp-table-th {
    padding: 10px;
    color: $main;
    font-weight: 600;

    > a {
        color: $main;
        text-decoration: none;
    }
}

.table {
    > thead > tr > th {
        @extend %tlp-table-th;

        border-bottom: 2px solid $main;
    }

    > tfoot > tr > th {
        @extend %tlp-table-th;

        border-top: 2px solid $main;
    }

    > tbody {
        + tbody {
            border-top: 0;
        }

        > tr:nth-child(even) > td {
            background: #fcfcfc;
        }

        > tr:nth-child(odd) > td {
            background: #ffffff;
        }

        > tr:hover > td {
            background: transparentize($main, .93);
        }

        > tr > td {
            padding: 10px;
            border-bottom: 1px solid #e3e5ed;
            line-height: normal;
            vertical-align: middle;

            &.table-cell-section {
                padding: 5px 10px;
                background: $main-background;
                color: $main;
                font-size: 11px;
                font-weight: 600;
                letter-spacing: .3px;
                text-transform: uppercase;
            }

            &.table-cell-empty {
                height: 100px;
                background: #fcfcfc;
                color: transparentize($main, .7);
                font-style: italic;
                text-align: center;
                vertical-align: middle;
            }
        }

        > tr:first-child > td {
            border-top: 0;
        }

        > tr:last-child > td {
            border: 0;
        }
    }

    > thead > tr > th a,
    > tbody > tr > td a {
        text-decoration: none;
    }
}
